<template>
	<div class="apply_add3">
		<div class="mid">
				<div style="font-size:30px;font-weight:bolder;color:#f7a600;margin-bottom:20px;">app证书</div>
				<div style="margin-bottom:20px;">
					<label style="font-weight:bolder;font-size:18px;margin-right:10px">应用名称:</label><span>{{this.AuthorizedData.name}}</span>
					<el-button type="success"  style='float:right;margin-right:52px;' @click='delImpower()' plain>取消授权</el-button>
				</div>
				<!--appkey-->
				<div style="margin-bottom:20px;">
					<label style="font-weight:bolder;font-size:20px;margin-right:10px">appkey:</label><span>{{this.AuthorizedData.secretkey}}</span>
				</div>
				<!--token-->
				<div style="margin-bottom:20px;">
					<label style="font-weight:bolder;font-size:20px;margin-right:10px">token:</label><span>{{this.AuthorizedData.token}}</span>
				</div>
		</div>
			<div style="margin:50px;font-size:20px;font-weight:bolder;font-family:Hiragino Sans GB"> 授权接口
				<el-button type="success" @click='toPortList()' style='float:right;' plain>添加接口授权</el-button>
			</div>
			<!--表格数据的展示-->
			<div class="biao">
				<el-table
					:data="tableData"
					border
					v-loading="listLoading"
					:header-cell-class-name="tableheaderClassName"
					:row-class-name="tableRowClassName">
					<el-table-column 
					prop="name"
					label="接口名称">
					</el-table-column>
					<el-table-column
					prop="url"
					label="路径"
					width='300px'>
					</el-table-column>
					<el-table-column
					prop="status"
					label="状态"
					:formatter="formatter">
					</el-table-column>
					<el-table-column
					prop="type"
					label="类型"
					:formatter="formatterType">
					</el-table-column>					
					<el-table-column
					prop="createTime"
					label="创建时间">
					</el-table-column>
					<el-table-column
						fixed="right"
						label="操作"
						width="100">
						<template slot-scope="scope">
							<el-button   @click="delImpowers(scope.row)" type="text" size="small" >
								<span>取消授权</span>
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--分页-->
		<div class="di">
			<div class="di_foot" style="text-align: center;">
				<el-pagination
					background
					layout="prev, pager, next" 
					@current-change="handleCurrentChange" 
					:total="totalCount" 
				>
				</el-pagination>
			</div>
		</div>
		
	</div>
</template>
<script>
import { addAdmin, checkLogin, deleteAuth,delApplyImpower } from '../../api/api.js';
export default{
	name:"addAdmin",
	data(){
		return{
			page: 1,
			totalCount:0,
			AuthorizedData:'',	
			interfaceId:'',
			applyId:'',
			listLoading:false,
			pageNumber:1,
			pageSize:10,
			tableData:[],
			ApplicationId:null,
		}
	},
	methods: {
		//获取已授权接口列表
		getUsers() {
			let para = {
				pageNumber: this.pageNumber,
				pageSize:this.pageSize,
				appId:this.ApplicationId,
			};
			console.log(para);
			this.listLoading = true;
			addAdmin(para).then((res) => {
				this.tableData = res.list;
				console.log(this.tableData)
				this.totalCount = res.count;
				this.listLoading = false;
			});
		},
		//取消接口授权
		delImpowers(row){
			this.interfaceId = row.id;
			let para = {
				appId: this.ApplicationId,
				interfaceId:this.interfaceId
			};
			deleteAuth(para).then((res) => {
				console.log(res.message);
				if(res.code =='0000'){
					this.open();
				}else if(res.code =='2004'){
					let msg = '不能重复取消授权！'
					this.openError(msg);
				}else{
					this.openError(res.message);
				}
			});	
		},
		//取消单个应用授权
		delImpower(){
			let para = {
				appId: this.ApplicationId,
			};
			delApplyImpower(para).then((res) => {
				console.log(res.message);
				if(res.code =='0000'){
					this.openBack();
				}else if(res.code =='2004'){
					let msg = '不能重复取消授权！'
					this.openError(msg);
				}else{
					this.openError(res.message);
				}
			});	
		},
		//分页处理函数
	      handleCurrentChange(val) {
				this.pageNumber = val;
				this.getUsers();
		  },
		tableRowClassName({rowIndex}) {
			if (rowIndex % 2==0) {
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		tableheaderClassName() {
			return "table-head-th";
		},  
		//跳转页面函数
		toPortList(){
			this.$router.push('../interfaces/InterfaceList');
		},
		//操作成功提示
		open() {
	        this.$message({
	          	message: '取消授权成功！',
	          	type: 'success'
	        });
	        this.getUsers();
      	},
      	//应用取消授权返回
      	openBack (){
	        this.$message({
	          	message: '取消授权成功！',
	          	type: 'success'
	        });
	        this.$router.push('../apply/list')
      	},
		//操作失败提示
		openError(msg) {
	        this.$message({
	          	message: msg,
	          	type: 'error'
	        });
      	}, 
//    	格式化状态值
		formatter(row,column){
			return row.status == 1 ? '已发布' : '未发布'
		},
		formatterType(row,column){
			return row.type == 1 ? '内部接口' : '普通接口'
		},
      },
	mounted(){
		if(checkLogin(this)){
			var self = this;
			// 获取数据
			let Authorized = sessionStorage.getItem('Authorized');
			if(Authorized) {
				Authorized = JSON.parse(Authorized);
				self.applyId = Authorized.id
				self.AuthorizedData = Authorized;
				self.ApplicationId=Authorized.id;
				let keyPs = self.AuthorizedData.secretkey;
				console.log('kpkpkpkpkp',keyPs);
				let kp = keyPs.replace(/^[a-zA-Z0-9]{2,6}$/, '$');
				console.log('kpkpkpkpkp',kp);
				let tokenPs = self.AuthorizedData.token;
			}
			this.getUsers();
//			var storage=window.localStorage;
//			console.log(this.sites[0].img);
//			this.sites[0].img=storage.img;
//			this.sites[0].name=storage.name;
		}	
	}
}
</script>
<style scoped>
.apply_add3 .cell{ background:gray; }
.apply_add3{width:90%;margin: 0 auto;}
.apply_add3 .ding{ width:90%;height:160px;margin-left:40px;}
.apply_add3 .zb{ float:left; width:60%;line-height:70px;}
.apply_add3 .yb{ float:right;width:35%;}
.apply_add3 .mid{ margin-left:60px;margin-top:5px;line-height:36px;}
.apply_add3 .img{ float:left;}
.apply_add3 .el-input--prefix{ display:none; }
.apply_add3 .biao{ width:90%;margin-left:60px;margin-right:60px; margin-bottom: 50px }
.apply_add3 .has-gutter{font-weight:bolder;background:blue;}
.apply_add3 .btn{ margin:40px;display:block;color:#FFFFFF;background:#B6B6B6;font-size:20px;				font-weight:bolder;height:60px;line-height:60px;}
.apply_add3 .power{ margin-left:15px;height:50px;line-height:50px; }
.products_stable .di{
		width:90%;
		margin: 0 auto;
		overflow: hidden;
	}
	.products_stable .di .di_foot{
		float: right;
		width: 38%;
		padding-bottom: 20px;
		padding-top: 20px;
	}
</style>
